<template>
  <view class="comment_item">
    <view class="top">
      <view class="top_left">
        <img v-if="data.head!=null&&data.head!=''" class="user_avatar" :src="data.head" />
		<img v-else class="user_avatar" src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/myIcon/head.png" />
        <uni-tag
          v-if="data.isAuther==0"	
          class="tag"
          type="primary"
          :inverted="false"
          text="楼主"
          size="mini"
          circle
        />
        <span class="user_name">{{ data.nichen }}</span>
        <span class="user_name">{{ cReplyName }}</span>
      </view>
      
    </view>
    <view class="content" @tap="replyClick(data)">
      {{ c_content }}
      <span
        class="shrink"
        v-if="isShrink"
        @tap.stop="expandContentFun(data.msg)"
        >...展开</span
      >
    </view>
    <view class="bottom">
      <span class="create_time">{{ data.createTime.substring(5,data.createTime.length-3) }}</span>
      <span
        v-if="data.isDele"
        class="delete"
        @tap="deleteClick(data)"
        >删除</span
      >
     <span   class="reply" @tap="replyClick(data)"
        >回复</span>
		
		<view class="top_right" @tap="likeClick(null)">
		  <span :class="[data.isLike==1 ? 'active' : '', 'like_count']">{{
		    data.likeNum
		  }}</span>
		  <u-image  v-if="data.isLike==0"  src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/2024/images/dz.png" width="40rpx" height="40rpx"/>
		  <u-image  v-else  src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/2024/images/ydz.png" width="40rpx" height="40rpx"/>
		</view>
    </view>
	<view v-for="replyItem in replyList" class="replyView">
	<view class="top">
	  <view class="top_left">
	    <img v-if="replyItem.head!=null&&replyItem.head!=''" class="reply_avatar" :src="replyItem.head" />
		<img v-else class="reply_avatar" src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/myIcon/head.png" />
	    <uni-tag
	      v-if="replyItem.isAuther==0"	
	      class="tag"
	      type="primary"
	      :inverted="false"
	      text="楼主"
	      size="mini"
	      circle
	    />
	    <span class="reply_name">{{ replyItem.nichen }}</span>
		<img v-if="replyItem.tonichen!=null&&replyItem.tonichen!=''" src="../../static/icon/reply.png" style="height:30rpx;width:30rpx;margin:0 15rpx;">
	    <span v-if="replyItem.tonichen!=null&&replyItem.tonichen!=''" class="reply_name">{{ replyItem.tonichen }}</span>
	  </view>
	  
	  </view>
	  <view class="replyContent content" @tap="replyClick(replyItem)">
	    {{ replyItem.msg }}
	  </view>
	  <view class="bottom">
	    <span class="create_time">{{  data.createTime.substring(5,data.createTime.length-3)  }}</span>
	    <span
	      v-if="replyItem.isDele"
	      class="delete"
	      @tap="deleteClick(replyItem)"
	      >删除</span
	    >
	   <span   class="reply" @tap="replyClick(replyItem)"
	      >回复</span>
	  	
	  	<view class="top_right" @tap="likeClick(replyItem)">
	  	  <span :class="[replyItem.isLike==1 ? 'active' : '', 'like_count']">{{
	  	    replyItem.likeNum
	  	  }}</span>
	  	  <u-image  v-if="replyItem.isLike==0"  src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/2024/images/dz.png" width="40rpx" height="40rpx"/>
	  	  <u-image  v-else  src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/2024/images/ydz.png" width="40rpx" height="40rpx"/>
	  	</view>
	  </view>
	</view>
	<view class="replys" v-if="data.commentNum>0&&replyQuery.current==0" @click="openReplys">———展开{{data.commentNum}}条回复∨</view>
	<view class="replys" v-else-if="replyQuery.current>0&&data.commentNum>replyList.length" @click="openReplys">———展开更多∨</view>
	<view class="replys" v-else-if="data.commentNum>0" @click="closeReplys">———收起∧</view>
  </view>
</template>

<script>
import config from "@/config/index.config.js";
export default {
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    pData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      isShrink: this.data.msg.length > 70,
      c_content: this.data.msg.length > 70 ? this.data.msg.slice(0, 71) : this.data.msg,
	  replyQuery:{
		  id:this.data.id,
		current:0,
		  number:5
	  },
	  replyList:[]
    };
  },
  computed: {
    cReplyName() {
      return this.data.reply_name ? ` ▸ ` + this.data.reply_name : "";
    },
    cLikeCount() {
      return this.data.like_count === 0
        ? ""
        : this.data.like_count > 99
        ? `99+`
        : this.data.like_count;
    }
  },
  mounted() {
  	console.log("回复名字为：" ,this.data);
  },
  methods: {
	  // 展开评论
    expandContentFun() {
      this.isShrink = false;
	  this.c_content=this.data.msg;
    },
	likeClick(item){
		console.log(item)
		if(item==null)
			this.$emit("likeClick");
		else this.$emit("likeReply", item);
	},
	closeReplys(){
		this.replyQuery.current=0;
		this.replyList=[];
	},
	openReplys(item){
		this.replyQuery.current+=1;
		uni.request({
			url: `${config.baseUrl}/starCityAll/circleSon/circleCommentSonQuery`,
			method: "GET",
			data: this.replyQuery,
			dataType: "json",
			header: {
				"content-type": "application/json",
				"Blade-Auth":uni.getStorageSync("token")
			},
			success: (res) => {
						if(res.data.code==0){
							var dl=res.data.data;
							this.replyList=this.replyList.concat(dl||[])
						}
			}
		
		})
	},
	// 回复
    replyClick(item) {
      this.$emit("openCommon", item);
    },
	// 删除
    deleteClick(item) {
      this.$emit("deleteClick", item);
    }
  }
};
</script>


<style lang="scss" scoped>
////////////////////////
.center {
  display: flex;
  align-items: center;
}
.ellipsis {
  overflow: hidden; //超出文本隐藏
  white-space: nowrap; //溢出不换行
  text-overflow: ellipsis; //溢出省略号显示
}
////////////////////////
.comment_item {
	padding:15rpx;
  font-size: 28rpx;
  .top {
    @extend .center;
    justify-content: space-between;
    .top_left {
      display: flex;
      align-items: center;
      overflow: hidden;
      .user_avatar {
        width: 68rpx;
        height: 68rpx;
        border-radius: 50%;
        margin-right: 12rpx;
      }
	  .reply_avatar {
	    width: 48rpx;
	    height: 48rpx;
	    border-radius: 50%;
	    margin-right: 12rpx;
	  }
      .tag {
        margin-right: 6rpx;
      }
      .user_name {
        @extend .ellipsis;
        max-width: 180rpx;
        color: $uni-text-color-grey;
      }
	  .reply_name{
		  @extend .ellipsis;
		  max-width: 180rpx;
		  color: $uni-text-color-grey;
		  font-size:24rpx;
	  }
    }
    
  }
.top_right {
      @extend .center;
      .like_count {
        color: $uni-text-color-grey;
        &.active {
          color: $uni-color-primary;
        }
      }
    }
	.replyContent{
		font-size:26rpx;
	}
  .content {
    padding: 10rpx;
    margin-left: 70rpx;
	white-space:normal;
	overflow-wrap: break-word;
	width:600rpx;
    color: $uni-text-color;
    &:active {
      background-color: $uni-bg-color-hover;
    }
    .shrink {
      padding: 20rpx 20rpx 20rpx 0rpx;
      color:  #2979ff;
    }
  }
  .bottom {
    padding-left: 80rpx;
	display:flex;
	padding-right: 40rpx;
    font-size: 24rpx;
    .create_time {
      color: $uni-text-color-grey;
    }
    .delete {
      padding-right: 40rpx;
      color: $uni-border-color;
    }
    .reply {
		flex:1;
      color: #333;
    }
  }
}
.create_time{
	flex:1;
	maregin-right:20rpx;
}
.replys{
	font-size:28rpx;
	color:$uni-text-color-grey;
	margin-left:80rpx;
}
.replyView{
	margin-left:80rpx;
}
</style>
